<template>
  <div class="LifeColorCps-view" v-loading="loading" element-loading-spinner="el-icon-loading"
    element-loading-background="#f8f8f8" :element-loading-text="$t('message.bhView.loading')">
    <div class="color-view">
      <!-- 腐食率（mm/y） -->
      <div class="select-color">
        <div class="title">
          {{ $t("message.environmentSetting.leftColor.title_1") }}
        </div>
        <div class="color-view-wrapper">
          <div class="color-row-view" v-for="i in colorList" :key="i.codeOrdr" v-if="i.code == 1">
            <div class="select-color-cps">
              <el-color-picker :show-alpha="false" size="mini" v-model="i.judgCor"
                :predefine="predefineColors"></el-color-picker>
            </div>
            <span>{{ i.judgMkr }}</span>
            <el-input v-model="i.judgCrr" class="number-ipt orange"
              @input="i.judgCrr = $setMyNum(i.judgCrr, '4 - 2')"></el-input>
            <el-input v-model="i.judgSymb" class="number-ipt style-number-ipt orange"
              @input="i.judgSymb = $setMaxLength(i.judgSymb, 2)"></el-input>
          </div>
        </div>
      </div>
      <!-- 余寿命（年） -->
      <div class="select-color select-color-small">
        <div class="title">
          {{ $t("message.environmentSetting.leftColor.title_2") }}
        </div>
        <div class="color-view-wrapper">
          <div class="color-row-view" v-for="i in colorList" :key="i.codeOrdr" v-if="i.code == 2">
            <div class="select-color-cps">
              <el-color-picker :show-alpha="false" size="mini" v-model="i.judgCor"
                :predefine="predefineColors"></el-color-picker>
            </div>
            <span>{{ i.judgMkr }}</span>
            <el-input v-model="i.judgCrr" class="number-ipt orange"
              @input="i.judgCrr = $setMyNum(i.judgCrr, '4 - 2')"></el-input>
          </div>
        </div>
      </div>
      <!-- 残肉厚（mm） -->
      <div class="select-color select-color-small">
        <div class="title">
          {{ $t("message.environmentSetting.leftColor.title_3") }}
        </div>
        <div class="color-view-wrapper">
          <div class="color-row-view" v-for="i in colorList" :key="i.codeOrdr" v-if="i.code == 3">
            <div class="select-color-cps">
              <el-color-picker :show-alpha="false" size="mini" v-model="i.judgCor"
                :predefine="predefineColors"></el-color-picker>
            </div>
            <span>{{ i.judgMkr }}</span>
            <el-input v-model="i.judgCrr" class="number-ipt orange"
              @input="i.judgCrr = $setMyNum(i.judgCrr, '4 - 2')"></el-input>
          </div>
        </div>
      </div>
    </div>
    <div class="title-color-view">
      {{ $t("message.environmentSetting.leftColor.label_1") }}
    </div>
    <div class="check-box-view">
      <el-checkbox v-model="checkList.longTerm">{{
        $t("message.environmentSetting.leftColor.radio_1")
      }}</el-checkbox>
      <el-checkbox v-model="checkList.shortTerm">{{
        $t("message.environmentSetting.leftColor.radio_2")
      }}</el-checkbox>
      <el-checkbox v-model="checkList.minMultiplication">{{
        $t("message.environmentSetting.leftColor.radio_3")
      }}</el-checkbox>
    </div>
    <el-checkbox v-model="crrJudgPrt">{{
      $t("message.environmentSetting.leftColor.label_2")
    }}</el-checkbox>
    <div class="footer">
      <el-button @click="getLifeColorOptionApi">
        {{ $t("message.environmentSetting.btns.bottomBtn.editor") }}</el-button>
      <el-button type="primary" class="okBTn" @click="UpdateOptionFun">
        {{ $t("message.environmentSetting.btns.bottomBtn.save") }}</el-button>
    </div>
  </div>
</template>

<script>
import { getLifeColorOption, lifeColorOption, GetRequiredTipsMsg } from "@/api/api.js";
export default {
  name: "LifeColorCps",
  data() {
    return {
      selectedLineColor: "0x80ffff",
      selectedLineColor2: "",
      value: "",
      checked: false,
      colorList: [],
      checkList: {
        longTerm: null,
        shortTerm: null,
        minMultiplication: null,
      },
      predefineColors: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
      ],
      loading: false,

      crrJudgPrt: false
    };
  },
  components: {},
  watch: {},
  methods: {
    getLifeColorOptionApi() {
      let dataJson = {
        platCode: 9,
      };
      getLifeColorOption(dataJson).then((res) => {
        console.log(res, "!posdjgpods");
        if (res.data.code != 0) {
          return;
        }
        this.crrJudgPrt = res.data.data.crrJudgPrt == 1 ? true : false;
        this.colorList = res.data.data.currList;
        let generalCurr = res.data.data.generalCurr;
        generalCurr.longTerm == 1
          ? (this.checkList.longTerm = true)
          : (this.checkList.longTerm = false);
        generalCurr.shortTerm == 1
          ? (this.checkList.shortTerm = true)
          : (this.checkList.shortTerm = false);
        generalCurr.minMultiplication == 1
          ? (this.checkList.minMultiplication = true)
          : (this.checkList.minMultiplication = false);
      });
    },
    async UpdateOptionFun() {
      let flg = false;
      let colorLis = [];
      this.colorList.forEach((item, index) => {
        colorLis.push({
          code: item.code,
          codeOrdr: item.codeOrdr,
          judgCor: item.judgCor,
          judgMkr: item.judgMkr,
          judgSymb: item.judgSymb,
          judgCrr: parseFloat(item.judgCrr)
        });
        if (item.judgSymb == '' && index <= 5) {
          flg = true;
        }
        if (item.judgCrr == '') {
          flg = true;
        }
      });
      if (flg) {
        let R = await GetRequiredTipsMsg();
        this.$alert(R.data.msg, {
          confirmButtonText: 'OK',
          type: 'warning',
          callback: action => {
          }
        });
        return
      }
      let dataJson = {
        crrJudgPrt: this.crrJudgPrt ? 1 : 0,
        currList: colorLis,
        generalCurr: {
          longTerm: this.checkList.longTerm ? 1 : 0,
          shortTerm: this.checkList.shortTerm ? 1 : 0,
          minMultiplication: this.checkList.minMultiplication ? 1 : 0,
          platCode: 9,
        },
      };
      if (
        dataJson.generalCurr.longTerm == 0 &&
        dataJson.generalCurr.shortTerm == 0 &&
        dataJson.generalCurr.minMultiplication == 0
      ) {
        this.$alert("余寿命計算ルールを選択してください。", '', {
          confirmButtonText: 'OK',
          type: 'warning',
        });
        return;
      }
      this.loading = true;
      lifeColorOption(dataJson)
        .then((res) => {
          if (res.data.code != 0) {
            this.$alert(res.data.msg, '', {
              confirmButtonText: 'OK',
              type: 'warning',
            });
            return;
          }
          this.$message({
            message: res.data.msg,
            type: "success",
          });
        })
        .catch(() => {
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
  created() {
    this.getLifeColorOptionApi();
  },
  mounted() { },
  beforeDestroy() { },
  destroyed() { },
};
</script>
<style lang="scss" scoped>
.LifeColorCps-view {
  width: 100%;
  height: 100%;
  position: relative;

  .color-view {
    width: 618px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .select-color {
      width: 245px;

      .title {
        margin-bottom: 8px;
        color: #333333;
      }

      .color-view-wrapper {
        width: 100%;
        padding: 16px 20px;
        background: #fff;
        border-radius: 2px;
        border: 1px solid #d9d9d9;

        .color-row-view {
          width: 100%;
          height: 32px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 16px;

          .select-color-cps {
            width: 28px;
            height: 28px;
          }

          .number-ipt {
            width: 84px;
            height: 32px;

            ::v-deep .el-input__inner {
              width: 100%;
              height: 100%;
              background: #ffffe1;
              font-size: 14px;
              font-weight: bold;
              text-align: right;
            }
          }

          .style-number-ipt {
            width: 50px;
            height: 32px;

            ::v-deep .el-input__inner {
              width: 100%;
              height: 100%;
              background: #ffffe1;
              font-size: 14px;
              font-weight: bold;
              text-align: center;
            }
          }
        }

        .orange {
          ::v-deep .el-input__inner {
            background: rgb(255, 222, 172) !important;
          }
        }

        .color-row-view:last-child {
          margin-bottom: 0;
        }
      }

      ::v-deep .m-colorPicker {
        width: 100%;
        height: 100%;
        margin: 0;
      }
    }

    .select-color-small {
      width: 177px;
    }
  }

  .title-color-view {
    width: 100%;
    font-size: 14px;
    margin: 16px 0;
    color: #333333;
  }

  .check-box-view {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 588px;
    height: 32px;
    padding: 0 24px;
    background: #fff;
    border-radius: 2px;
    border: 1px solid #d9d9d9;
    margin-bottom: 16px;

    ::v-deep .el-checkbox__label {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.85);
    }
  }

  ::v-deep .el-color-picker__icon {
    display: none;
  }

  ::v-deep .el-color-picker--mini .el-color-picker__trigger {
    padding: 0;
  }
}

.footer {
  position: absolute;
  left: 0px;
  bottom: 50px;
  height: 32px;
  display: flex;

  button {
    width: 123px;
    height: 32px;
    // background: #ffffff;
    // border: 1px solid #d9d9d9;
    text-align: center;
    line-height: 32px;
    margin-right: 16px;
  }

  .okBTn {
    // background: #106ebe;
    // color: #fff;
  }
}

::v-deep .m-colorPicker .colorBtn {
  width: 100%;
  height: 100%;
}

::v-deep .m-colorPicker .box {
  width: 212px;
  z-index: 666;
}

::v-deep .m-colorPicker {
  margin: 0 8px;
}

::v-deep .m-colorPicker .box {
  width: 212px;
  z-index: 666;
}

::v-deep .m-colorPicker {
  margin: 0 8px;
}
</style>
